<template>
  <view class="classificationSearch pagecon">
    <head-box :titles="groupData.title"></head-box>
    <view class="banner">
      <image
        class="index-top-bg-img"
        :src="bannerImg"
        mode=""
      ></image>
    </view>
    <div class="lists">
      <view class="search-width">
        <div class="db">
          <vueSearch @confirm="onSearchBlur"   type="b"></vueSearch>
        </div>
        <text class="selectAdd" @click="onSelectAdd"
          >{{ cityCode.cityText }}
          <image class="drop-dowm-img" src="/static/img/drop-down.png" mode="widthFix"></image
        ></text>
      </view>
      <frontList class="tab-botton"
        :list="dataList"
        @click="onPartyGroupService"
      ></frontList>
      <u-loadmore :status="status" @loadmore="loadmore" class="paddings" />
      <tabs-box></tabs-box>
    </div
    >
    <selectAddress @confirm="onAddConfirm" ref="address"></selectAddress>
  </view>
</template>

<script>
  import frontList from '@/components/frontList/frontList'
  import { mixins1 } from '@/mixins/mixins-1'
  import {getFrontFrom} from '@/common/type'
  import {getGroupUrl} from '@/api/group'
  import vueSearch from '@/components/search'
  import selectAddress from '@/components/selectAddress/selectAddress'
  import {gpNewsBannerList} from '@/api/banner'
  export default {
    mixins: [mixins1],
    data() {
      return {
        typeValue:'3',//除了3之外的1，2，4，5可以 跳第三方
        bannerImg:'',//banner轮播
        //城市信息
        cityCode: {
          code1: '', //城区id
          code2: '', //街道id
          cityText: '请选择城区', //展示的地区名字
        },
      }
    },
    components: {
      frontList,
      vueSearch,
      selectAddress
    },
    onLoad(opt) {

      this.getBannerList(opt)
      this.typeValue = opt.value
      this.gpFrontList()
    },
    onShow(){
      // #ifdef H5
      console.log('分享')
      this.$wxSetShare()
      // #endif
    },
    methods: {
      //阵地图片轮播
      getBannerList({good:type,value}) {
        gpNewsBannerList({type:+type, isPublic:'Y'}).then(res=>{
          const {result:{records},code} = res
          if(code===200){
           if(records&&records.length){
             this.bannerImg = `${this.$imageUrl}${records[0].imageUrl}`
           } else {
             this.updateBanner(value)
           }
          }
        }).catch(e=>{
          console.log(e)
        })
      },
      //地址选择
      onSelectAdd(){
        this.$refs.address.show =true
      },
      //阵地详情
      onPartyGroupService(item){
        this.getGroupUrlCbId(item)
      },
      //直接跳第三方页面
      getGroupUrlCbId({id,frontFrom,frontUrl,frontCode,frontName}){
        this.$clickGpFrontPv({frontCode,frontName})
        return getFrontFrom(getGroupUrl,id,frontFrom,frontUrl, this.typeValue)
      },
      //更新banner图片
      updateBanner(value){
        let  img='/static/service/';//banner轮播
        const banner = {
          3:`${img}dc255078a84784f56a53e5867dea2ee.png`,
          1:`${img}7f8eb01082f7c4345a21eaa78f7b663.png`,
          5:`${img}7d0b22cb783ea33b1219c535c57db7a.png`,
          4:`${img}f2882a14f81ce6e55c631e14f9083c51.png`,
          2:`${img}6fd589059346300463c8d2c55bf011c.png`,
          6:`${img}a9e858894799ad72969acc8c4ff87d4.png`,
        }
        this.bannerImg =banner[value]
      },
      //点击确定按钮，返回当前选择的值
      onAddConfirm(a) {
        this.cityCode = {
          code1: a.value, //城区id
          cityText: `${a.label}`, //展示的地区名字
        }
        this.onRest()
      },
      //阵地接口-分页列表查询
      async gpFrontList() {
        const params = {
          frontFrom: this.groupData.value,
          frontAreaCode: this.cityCode.code1,
        }
        await this.gpFrontListData(params)
      },
    },
  }
</script>

<style lang="scss" scoped>
  .classificationSearch {
    .banner {
      height: 330rpx;
      .index-top-bg-img {
        width: $width100;
        height: $height100;
      }
    }
    .drop-dowm-img {
      width: 24rpx;
      margin-left: 10rpx;
    }
    .search-width {
      position: relative;
      padding: 40rpx 22rpx 0 24rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .db {
        width: 70%;
        /deep/.u-input {
          width: 100%;
        }
      }
      .search {
        position: absolute;
        right: 28%;
        padding-right: 45rpx;
        top: 50%;
      }
      .selectAdd {
        color: #888;
        font-size: 26rpx;
      }
    }
  }
  .paddings {
    padding-top: 15%;
  }
</style>
